<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .icon {
            width: 300px;
            height: 300px;
        }

        .icon-path {
            fill: none;
            animation: animation 5s linear forwards;
        }

        @keyframes animation {
            0% {
                fill: white;
                stroke: #333;
                stroke-dasharray: 2718;
                stroke-dashoffset: 2718;
            }

            50% {
                fill: white;
                stroke: #333;
                stroke-dasharray: 2718;
                stroke-dashoffset: 0;
            }

            75% {
                fill: #e5e7e7;
                stroke: white;
            }

            100% {
                fill: #90c9c4;
                stroke: white;
            }
        }
    </style>
</head>

<body>
    <svg t="1712067175745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="5041" width="200" height="200">
        <path class="icon-path" stroke="#000"
            d="M789.333333 64a170.666667 170.666667 0 0 1 170.666667 170.666667v311.466666a8.533333 8.533333 0 0 1-8.533333 8.533334h-46.933334a8.533333 8.533333 0 0 1-8.533333-8.533334V234.666667a106.666667 106.666667 0 0 0-102.037333-106.56L789.333333 128H234.666667a106.666667 106.666667 0 0 0-106.56 102.037333L128 234.666667v554.666666a106.666667 106.666667 0 0 0 102.037333 106.56L234.666667 896h311.466666c4.693333 0 8.533333 3.84 8.533334 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533334 8.533333H234.666667a170.666667 170.666667 0 0 1-170.666667-170.666667V234.666667a170.666667 170.666667 0 0 1 170.666667-170.666667h554.666666z m85.333334 554.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-170.666667a85.333333 85.333333 0 0 1-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 1 85.333333-85.333333h170.666667z m0 64h-170.666667a21.333333 21.333333 0 0 0-21.184 18.837333L682.666667 704v170.666667a21.333333 21.333333 0 0 0 18.837333 21.184L704 896h170.666667a21.333333 21.333333 0 0 0 21.184-18.837333L896 874.666667v-170.666667a21.333333 21.333333 0 0 0-18.837333-21.184L874.666667 682.666667zM460.8 192c4.693333 0 8.533333 3.84 8.533333 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533333 8.533333h-159.530667l229.162667 229.184-45.248 45.248L256 301.269333V460.8a8.533333 8.533333 0 0 1-8.533333 8.533333H200.533333a8.533333 8.533333 0 0 1-8.533333-8.533333V256a64 64 0 0 1 60.245333-63.893333L256 192h204.8z"
            fill="#333333" p-id="5042"></path>
    </svg>

    <svg t="1712067202448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="5192" width="200" height="200">
        <path class="icon-path" stroke="#000"
            d="M789.333333 64a170.666667 170.666667 0 0 1 170.581334 165.333333L960 234.666667v311.466666a8.533333 8.533333 0 0 1-8.533333 8.533334h-46.933334a8.533333 8.533333 0 0 1-8.533333-8.533334V234.666667l-0.106667-4.629334a106.666667 106.666667 0 0 0-101.802666-101.930666L789.333333 128H234.666667l-4.629334 0.106667a106.666667 106.666667 0 0 0-101.930666 101.802666L128 234.666667v554.666666l0.106667 4.629334a106.666667 106.666667 0 0 0 101.802666 101.930666L234.666667 896h311.466666c4.693333 0 8.533333 3.84 8.533334 8.533333v46.933334a8.533333 8.533333 0 0 1-8.533334 8.533333H234.666667a170.666667 170.666667 0 0 1-170.581334-165.333333L64 789.333333V234.666667a170.666667 170.666667 0 0 1 165.333333-170.581334L234.666667 64h554.666666z m85.333334 554.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-170.666667a85.333333 85.333333 0 0 1-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 1 85.333333-85.333333z m0 64h-170.666667l-2.496 0.149333A21.333333 21.333333 0 0 0 682.666667 704v170.666667l0.149333 2.496A21.333333 21.333333 0 0 0 704 896h170.666667l2.496-0.149333A21.333333 21.333333 0 0 0 896 874.666667v-170.666667l-0.149333-2.496A21.333333 21.333333 0 0 0 874.666667 682.666667zM240.149333 194.901333L469.333333 424.064V264.533333c0-4.693333 3.84-8.533333 8.533334-8.533333h46.933333c4.693333 0 8.533333 3.84 8.533333 8.533333V469.333333a64 64 0 0 1-60.245333 63.893334L469.333333 533.333333h-204.8a8.533333 8.533333 0 0 1-8.533333-8.533333v-46.933333c0-4.693333 3.84-8.533333 8.533333-8.533334h159.530667L194.901333 240.149333l45.248-45.248z"
            fill="#333333" p-id="5193"></path>
    </svg>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const logo = document.getElementsByClassName("icon-path")[0];
            console.log(logo.getTotalLength());
        });
    </script>
</body>

</html>